<script setup lang="ts">
//滚动监听显示某个组件
import {onMounted, ref} from "vue";
import Login from "@/components/login/login.vue";
import useDialogStore from "@/store/dialog";

const showComponent = ref(false);

//监听window滚动
const handleScroll = () => {
  const scrollTop = window.scrollY;
  const windowHeight = window.innerHeight;
  const documentHeight = document.documentElement.scrollHeight;

  if (scrollTop + 1 + windowHeight >= documentHeight) {
    showComponent.value = true;
  } else {
    showComponent.value = false;
  }
};

onMounted(() => {
  window.addEventListener('scroll', handleScroll);
});

const dialogStore = useDialogStore();


</script>

<template>
  <div class="contaner">
    <hospital-top/>
    <div class="content">
      <router-view/>
    </div>
    <hospital-bootm v-if="showComponent"/>
  </div>
  <!--  登录组件dialog-->
  <login v-if="dialogStore.isShow"/>
</template>

<style scoped>
.contaner {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;

  .content {
    margin-top: 80px;
    width: 1200px;
    min-height: 700px;
  }
}
</style>
